<template>
  <div>
    <div class="nav_box">
      <div class="top_nav">
        <div class="Languages">
          <div class="type_left">
            <span class="span_type">语种:</span>
          </div>
          <div class="type_right">
            <span v-for="(item, index) in languagelist" :key="index">
              <el-divider direction="vertical" v-if="index!=0"></el-divider>
              <span
                :class="['span',index==0?'active':'']"
                ref="span_list1"
                @click="spanHandle('span_list1',index)"
              >{{item}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="top_nav">
        <div class="classification">
          <div class="type_left">
            <span class="span_type">分类:</span>
          </div>
          <div class="type_right">
            <span v-for="(item, index) in classlist" :key="index">
              <el-divider direction="vertical" v-if="index!=0"></el-divider>
              <span
                :class="['span',index==0?'active':'']"
                ref="span_list2"
                @click="spanHandle('span_list2',index)"
              >{{item}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="top_nav">
        <div class="screen">
          <div class="type_left">
            <span class="span_type">筛选:</span>
          </div>
          <div class="type_right">
            <span v-for="(item, index) in 27" :key="index">
              <el-divider direction="vertical" v-if="index!=0"></el-divider>
              <div v-if="index==18" class="space"></div>
              <span
                :class="['span',index==0?'active':'']"
                ref="span_list3"
                @click="spanHandle('span_list3',index)"
              >{{ index==0?"热门":String.fromCharCode(63+item)}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="singerbox">
      <div class="singer_box">
        <div class="card_container auto_box">
          <div class="card" v-for="(o,index) in singerlist" :key="index">
            <img v-lazy="o.img1v1Url" alt width="160" height="160" />
            <p>{{ o.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav-singer',
  created () {
    this.$http
      .get(`/api/top/artists?offset=${this.offset}&limit=${this.limit}`)
      .then((res) => {
        this.singerlist = res.data.artists
        console.log(this.singerlist.length)
      })
  },
  data () {
    return {
      languagelist: ["全部", "华语", "欧美", "日本", "韩国", "其他"],
      classlist: ["全部", "男歌手", "女歌手", "乐队组合"],
      singerlist: [],
      offset: 0,
      limit: 25
    }
  },
  methods: {
    spanHandle (listname, index) {
      const brolist = this.$refs[listname]
      for (let v of brolist) {
        v.className = "span"
      }
      brolist[index].className = "span active"
    }
  }
};
</script>

<style lang="scss" scoped>
.singerbox {
  width: 92%;
  margin: 0 auto;
}
.singer_box {
  position: relative;
  user-select: none;
  .line {
    border-bottom: 1px solid #ccc;
    width: 96%;
    margin: 0 auto;
  }
  .auto_box {
    overflow: auto;
  }
  .card_container {
    height: 100%;
    .card {
      width: 180px;
      margin: 5px 0;
      height: 220px;
      float: left;
      cursor: pointer;
    }
    img {
      border: 1px solid #eee;
    }
    p {
      margin: 0;
      padding: 0;
      padding-left: 10px;
      font-size: 14px;
      text-align: left;
    }
  }
}

.nav_box {
  width: 90%;
  height: 120px;
  margin: 0 auto;
  text-align: left;
  font-size: 13px;
  .top_nav {
    margin-bottom: 10px;
    height: 20px;
    width: 100%;
    .type_left,
    .type_right {
      float: left;
      box-sizing: border-box;
    }
    .space {
      height: 10px;
    }
    .type_left {
      width: 4%;
    }
    .type_right {
      width: 72%;
      height: 100%;
    }
    .el-divider--vertical {
      margin: 0 10px;
    }
    .screen {
      height: 60px;
    }
  }
  .span {
    user-select: none;
    font-size: 12px;
    cursor: pointer;
  }
  .active {
    color: white;
    background-color: rgba(#000, 0.4);
    border-radius: 2px;
    padding: 2px 5px;
    text-align: center;
  }

  .span_type {
    margin-right: 5px;
  }
}
.line {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  border-top: 1px solid #ddd;
}
</style>